<template>
  <div class="drill-task-table">
    <el-form-item label="演练任务" prop="event_name">
      <el-row>
        <el-button type="primary" size="mini" @click="handleDrillTaskAdd">添加演练任务</el-button>
      </el-row>
      <el-table :data="tasks" size="mini" border :style="{ width: '100%', marginTop: '15px' }">
        <el-table-column prop="userName" label="执行人" width="150"> </el-table-column>
        <el-table-column prop="groupName" label="所属分组" width="150"> </el-table-column>
        <el-table-column prop="deptName" label="所属部门" width="150"> </el-table-column>
        <el-table-column prop="taskContent" label="任务内容"> </el-table-column>
        <el-table-column prop="helpContent" label="辅助信息"> </el-table-column>
        <el-table-column prop="address" label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="handleDrillTaskEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleDrillTaskDel(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="检查内容" prop="event_name">
      <el-input type="textarea" v-model="content" placeholder="请填写检查内容" :style="{ width: '100%' }" @blur="onHandleCheckContentEdit"> </el-input>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: "DrillTaskTable",
  props: {
    tasks: {
      type: Array,
      default: () => [],
    },
    checkContent: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      content: "",
    };
  },
  methods: {
    handleDrillTaskAdd() {
      this.$emit("add");
    },
    handleDrillTaskEdit(row) {
      this.$emit("edit", row);
    },
    handleDrillTaskDel(row) {
      this.$emit("del", row);
    },
    onHandleCheckContentEdit() {
      this.$emit("contentEdit", this.content);
    },
  },
  watch: {
    checkContent(val) {
      this.content = val;
    },
  },
};
</script>
<style lang="scss" scoped></style>
